import BaseGroup from '@/components/js/BaseGroup'
import { EventBus } from '@/store/index'
import { COMPONENT_TYPES } from '@/common/const-wb'
import { addEvent, removeEvent } from '@/plugins/dom'

export default class ClickPuzzle extends BaseGroup {
  constructor() {
    super();
    //子类覆盖
    this.injectJsClassObj = null;
    this.componentBtns = [];
  }

  start() {
    //子类覆盖
    if (this.item.interactionData && this.item.interactionData.injectJsClassObj) {
      this.injectJsClassObj = this.item.interactionData.injectJsClassObj;
			
      _.forEach(this.components, (compData) => {
        if (compData.cid == COMPONENT_TYPES.wb_btn) {
          this.componentBtns.push(compData);
        }
      })
      this.componentBtns = _.sortBy(this.componentBtns, (compData) => {
        return compData.commonAttr.itemIndex;
      });

      this.addClickEvent();

      EventBus.$on('refreshPuzzle', () => {
        this.isPosted = true;
        this.refreshPuzzle();
      });
      this.refreshPuzzle();
    }
  }

  addClickEvent() {
    _.forEach(this.componentBtns, (compData) => {
      if (compData.cid == COMPONENT_TYPES.wb_btn) {
        let btn = compData.vueContainer.$refs.btn.$el;
        this.onBtnClick = this.onBtnClick.bind(this);
        addEvent(btn, "click", this.onBtnClick);
      }
    })
  }

  onBtnClick(e) {
    e.stopPropagation();
    let btn = e.currentTarget;
    let compId = btn.parentElement.id;
    let compData = this.componentMap[compId];

    let injectJsClassObj = this.injectJsClassObj;
    let relateCompId = injectJsClassObj.relateCompId;//触发组件事件id
    let puzzle = this.interactionData.puzzle;
    puzzle[compData.commonAttr.itemIndex] = 1;
    this.store.commit("updateInteractionData", { puzzle });
    EventBus.$emit("itemClick", {id: relateCompId, index: compData.commonAttr.itemIndex});
  }

  refreshPuzzle() {
    let puzzle = this.interactionData.puzzle;
    //刷新 点击按钮
    let isDisabled = true;
    let itemIndex = 0;
    let btnUrls = this.injectJsClassObj.urls.split(',');
    let btnUrl = '';
    _.forEach(this.componentBtns, (btnCompData) => {
      btnUrl = '';
      itemIndex = parseInt(btnCompData.commonAttr.itemIndex);
      if(puzzle[itemIndex] > 0) {
        isDisabled = false;
        if(puzzle[itemIndex] > 1){
          btnUrl = btnUrls[itemIndex];
          btnCompData.selectedBGUrl = btnUrl;
          btnCompData.commonAttr.backgroundColor = "red";
          // this.store.commit("updateComponentAttr", {
          //   id: btnCompData.id,
          //   selectedBGUrl: btnUrl
          // });
        }
      } else {
        isDisabled = true;
      }
      EventBus.$emit('btnStatus', { isDisabled, compId: btnCompData.id });
    })
  }


  destroy() {
    super.destroy();
    //子类覆盖
    this.injectJsClassObj = null;
    _.forEach(this.componentBtns, (compData) => {
      if (compData.cid == COMPONENT_TYPES.wb_btn) {
        let btn = compData.vueContainer.$refs.btn.$el;
        removeEvent(btn, "click", this.onBtnClick);
      }
    })

    this.componentBtns = null;
  }
}
